<template>
  <div>
      <van-nav-bar
  title="登录"
  left-arrow
  @click-left="onClickLeft"
/>
<div class="loginForm_Box">
    <p class="title">登录注册更精彩</p>
       <van-form @submit="onSubmit" class="loginForm">
  <van-field
    v-model="username"
    name="username"
    label="用户名"
    placeholder="admin"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="123456"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>
</div>
      <!-- <p class="">登录注册更精彩</p> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    //顶部导航栏返回
     onClickLeft() {
      Toast('返回');
    },
    onSubmit(values) {
      this.$http.post('/api/login',{...values}).then(res =>{
        if(res.status == 200) {
           this.$toast.success('登录成功');
           this.$router.push('/home')
        }else {
          this.$toast.fail('登录账号错误或者密码错误请重新输入');
        }
      })
    },
  },
};
</script>

<style lang="less">
.loginForm_Box {
    width: 100%;
    height: 6.6667rem;
    // background-color: pink;
    .title {
    padding: .1rem .1733rem .1867rem;
    font-size: 0.8rem;
    color: #000;
    }
}
</style>